import React, {memo, useEffect,useState} from 'react';
import {shallowEqual, useDispatch, useSelector} from 'react-redux'
import { Table, Tag, Space, Divider, Button, Modal, Spin, message, Select, Form, Input} from 'antd';
import { getRepairInfoAction, handleRepairAction } from '../../store/repairInfoStore/actionCreators';
import { handleRepair } from '../../services';
import { TimeProcess } from '../../utils';

//空调报修
//宿舍号，报修人，报修人联系方式，报修问题详述
const { Option } = Select;

export default memo(function RepairRecord() {
    const [isChange, setIsChange] = useState(false);
    var {repairInfo} = useSelector(state => ({
      repairInfo: state.getIn(["repair", "repairInfo"])
    }), shallowEqual)

    // console.log("repairInfo", repairInfo);

    //获取报修记录信息
    // console.log("报修记录页");
    
    const dispatch = useDispatch();

    useEffect(() => {
      dispatch(getRepairInfoAction())
    }, [dispatch, repairInfo, isChange])

    const handleAccept = (text, record) => {
      // console.log(item);
      // console.log(record);
      const repair_id = {
        repair_id: record.repair_id
      }
      dispatch(handleRepairAction(repair_id));
      setIsChange(!isChange);
    }
        
    
  
      const columns = [
          {
            title: '寝室号',
            dataIndex: 'repair_room_number',
            key: 'repair_room_number',
          },
          {
              title: '空调编号',
              dataIndex: 'repair_air_number',
              key: 'repair_air_number',
            },
          {
            title: '报修时间',
            dataIndex: 'repair_date',
            key: 'repair_date',
            render: item => {
              const realTime = TimeProcess(item)
              return (
                <div>{realTime}</div>
              )
            }
          },
          {
            title: "寝室长",
            dataIndex: "repair_student_name",
            key: "repair_student_name",
            
          },
          {
            title: '报修问题',
            dataIndex:'repair_problem',
            key: 'repair_problem',
          
          },
          {
            title: '处理',
            dataIndex:'repair_is_accept',
            key: 'repair_is_accept',
            render:(item, record) => {
              var displayContent = "未处理";
              var danger = true;
              if(item === 1){
                displayContent = "已处理";
                danger = false
              }
                return (
                    <Button danger={danger}  onClick={e => handleAccept(item,record)}>{displayContent}</Button>
                )
            }
          
          },
        ];
  
  
      return (
          <div>
              <Divider orientation="left">报修记录</Divider>
              <div>
                  <Table columns={columns} dataSource={repairInfo} style={{minHeigh:"100%"}}/>
              </div>
          </div>
      )
})